<template>
    <div class="msg-detail">
        <div class="header">
            <p>消息详情</p>
            <el-button class="link" type="primary">
                <router-link to="/msgList" style="color: #fff;">返回</router-link>
            </el-button>
        </div>
        <div class="main">
            <div class="table-wrap">
                <div class="header-wrap">基本信息</div>
                <div class="wrap-menu">
                    <div class="menu-list">
                        <div class="menu-name">消息标题</div>
                        <div class="menu-info">{{info.title}}</div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">消息内容</div>
                        <div class="menu-info">
                            <div v-html="info.content">
                                {{info.content}}
                            </div>
                        </div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">发送时间</div>
                        <div class="menu-info">{{info.sendTime}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    export default {
        data() {
            return {
                id:'',
                info:{},
            }
        },
        created() {
            this.id = this.$router.currentRoute.query.id;
            this.getDetail();
        },
        methods: {
            getDetail:function(){
                let url = CONSTANT.URL.MSG.DETAIL,
                    data={
                        id:this.id
                    }
                common.requestAjax(url,{},data,(res)=>{
                    if(res.status == 200){
                        let data = res.data;
                        this.info = data.bussData
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .msg-detail {
        .header{
            height: 36px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
            }
        }
        .main{
            margin-left: 5%;
            .table-wrap{
                width: 80%;
                margin-top: 30px;
                .header-wrap{
                    height: 50px;
                    line-height: 50px;
                    font-size: 14px;
                    border: 1px solid #dedede;
                    padding-left: 50px;
                    background-color: #f5f5f5;
                    color: #000;
                    font-weight: bold;
                }
                .wrap-menu{
                    border-right: 1px solid #dedede;
                    border-left: 1px solid #dedede;
                    .menu-list{
                        border-bottom: 1px solid #dedede;
                        display: -webkit-box;
                        display: box;
                        display: -moz-box;
                        /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                        display: -webkit-flex;
                        /* 新版本 - 适配Chrome */
                        display: flex;
                        /*-webkit-box-align: center;*/
                        /*-moz-align-items: center;*/
                        /*-webkit-align-items: center;*/
                        /*align-items: center;*/
                        min-height: 80px;
                        font-size: 14px;
                        cursor: pointer;
                        &:hover{
                            background-color: #f5f7fa;
                        }
                        .menu-name{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                            /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                            -webkit-box-justify-content:  flex-end;
                            -moz-align-justify-content:  flex-end;
                            -webkit-align-justify-content:  flex-end;
                            justify-content:  flex-end;
                            flex: 1;
                            -webkit-flex: 1;
                            text-align: right;
                            min-height: 80px;
                            border-right: 1px solid #dedede;
                            color: #909399;
                            padding: 10px  30px 10px 0;
                        }
                        .menu-info{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                            /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                            -webkit-box-justify-content:  flex-start;
                            -moz-align-justify-content:  flex-start;
                            -webkit-align-justify-content:  flex-start;
                            justify-content:  flex-start;
                            min-height: 80px;
                            flex: 3;
                            -webkit-flex: 3;
                            padding: 10px  0px 10px 30px;;
                            .image-info{
                                width: 80px;
                                cursor: pointer;
                                height: 40px;
                                margin-right: 10px;
                            }
                            .avatar{
                                width: 80px;
                                height: 80px;
                                border-radius: 50%;
                                -webkit-border-radius: 50%;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
